<template>
  <div class="">
    <div class="header">
    <div class="logo">
      <img src="../../assets/brand8.png" alt="" />
      <span>网上花店</span>
    </div>
    <div class="nav">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/flower">鲜花信息</el-menu-item>
        <el-menu-item index="/infomation">鲜花资讯</el-menu-item>

        <el-submenu index="2">
          <template slot="title">个人中心</template>
          <el-menu-item index="/address">我的地址</el-menu-item>
          <el-menu-item index="/star">我的收藏</el-menu-item>
          <el-menu-item index="/order">我的订单</el-menu-item>
        </el-submenu>
        <el-menu-item index="/shopping">购物车</el-menu-item>
        <el-menu-item index="4">我的消息</el-menu-item>
      </el-menu>
    </div>
    <div class="person">
      <div class="regist" v-if="!this.user1">
        <el-row>
          <el-button size="mini" @click="rester">注册</el-button>
          <el-button size="mini" @click="ok">登录</el-button>
        </el-row>
      </div>
      <div class="ok" v-else-if="this.user1.data.username">
        <el-dropdown :hide-on-click="true">
          <span class="el-dropdown-link" >
            <img :src=Img alt="" />
       
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><router-link to="/person">我的花店</router-link></el-dropdown-item>
            <el-dropdown-item><router-link to="/password">修改密码</router-link></el-dropdown-item>
            <el-dropdown-item @click.native="TD">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    </div>
    <!-- <div style="width: 100%; margin: 0 auto">
      <router-view />
    </div> -->
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      Img: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      activeIndex: "1",
      userInfo:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
      user1:{}
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    // 注册
    rester(){
      this.$router.push('/login')
    },
    // 登录
    ok(){
      this.$router.push('/login')
      
    },
    // 退出登录
    TD(){
      this.$router.push('/login')
      localStorage.removeItem('user');
    },
    // 验证用户头像是否存在，要是存在就换，null就是默认头像
    IsImg(){
      if(this.userInfo.data.avatarUrl){
        // console.log(userInfo)
        this.Img = `"../assets/${this.userInfo.data.avatarUrl}"`
      }
    }
  },
  created() {
    this.user1 = JSON.parse(localStorage.getItem("user"))
    console.log(this.user1)
    // console.log(this.user1.data.username)
  },
  mounted() {
    
     // this.IsImg();
    //  let user = JSON.parse(localStorage.getItem("user"))
    // console.log(user)
    // console.log(this.userInfo)
    // console.log(this.userInfo.data.username)
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  /* height: 100%; */
}

.header {
    width: 100%;
    height: 60px;
  display: flex;
  // justify-content 属性定义了项目在主轴上的对齐方式。
  justify-content: space-between;
  align-items: center;

  .logo {
 display: flex;
justify-content: center;
align-items: center;
    img {
        display: inline-block;
       width: 180px;
       height: 60px;
    }
    span {
      display: inline-block;
    //   position: absolute;
    //   width: 100px;
    //   height: 60px;
    //   margin-top: 25%
    }

  }
  .nav {
    i {
      display: inline-block;
      margin-top: 30px;
    }
  }
  .person {
    display: flex;
    .el-button {
      width: 60px;
      height: 30px;
      justify-content: center;
      align-items: center;
      // margin-top: 20%;
    }
    .ok {
      .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
        
      }
      .el-dropdown-menu .el-dropdown-menu__item {
        // height: 200px;
        margin: 40px 20px;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    }
    img {
      width: 40px;
      height: 40px;
      margin: 10px 30px;
      border: 1px solid #1b1b1b;
      border-radius: 50%;
    }
  }
}
</style>
